<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
      <style type="text/css">
        [hidden="true"] {
          display: none;
        }

        .header-outer {
          position: fixed;
          top: 0px;
          left: 0px;
          right: 0px;
          margin: 0px;
          padding: 0px;
        }

        .header {
          background-color: white;
          color: black;
          margin: 2px;
          border: 1px black solid;
        }

        .h-table,
        #net-url,
        #ch-url,
        #dcc-chat-title {
          width: 100%;
        }

        #splash {
          padding-top: 55%;
          padding-bottom: 20%;
          font-size: 24pt;
          font-weight: bold;
          text-align: center;
        }

        #cli-version-container {
          text-align: center;
          width: 100%;
        }

        #usr-descnodes,
        #ch-topicnodes {
          line-height: 110%;
        }

        #ch-usercount,
        #ch-modestr,
        #net-lag,
        #dcc-file-progress {
          white-space: nowrap;
        }

        .label {
          font-weight: bold;
          text-align: right;
          vertical-align: top;
          white-space: nowrap;
          padding-right: 0.5em;
        }

        .value {
          vertical-align: top;
          padding-right: 1em;
        }

        #usr-title,
        #usr-descnodes {
          text-align: center;
        }
        
        .crop-right {
        }
        
      </style>

      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <script type="application/x-javascript" src="chrome://chatzilla/content/output-window.js"></script>
    </head>

  <body class="chatzilla-body">

    <div class="header-outer">

      <div class="header" id="cli-container" hidden="true">
        <table class="h-table">
          <tbody>
            <tr>
              <td class="label" localize="output.knownnets"></td>
              <td class="value" id="cli-netcount"></td>
              <td class="label" id="cli-version-container"
                  condition="yellow">ChatZilla <span id="cli-version">error</span></td>
              <td class="label" localize="output.connnets"></td>
              <td class="value" id="cli-connectcount" localize="none"></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="header" id="net-container" hidden="true">
        <table class="h-table">
          <tbody>
            <tr>
              <td class="label" id="net-url-l" localize="output.url"></td>
              <td class="value crop-right" id="net-url">
                <a id="net-url-anchor" class="chatzilla-link"
                   href="irc://foo/bar">irc://foo/bar</a>
              </td>
              <td class="value" id="net-status"
                  condition="red" localize="output.notconn"></td>
              <td class="label" id="net-lag-l" localize="output.lag"></td>
              <td class="value" id="net-lag" localize="unknown"></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="header" id="ch-container" hidden="true">
        <table class="h-table">
          <tbody>
            <tr>
              <td class="label" id="ch-url-l" localize="output.url"></td>
              <td class="value crop-right" id="ch-url">
                <a id="ch-url-anchor" class="chatzilla-link"
                   href="irc://foo/bar">irc://foo/bar</a>
              </td>
              <td class="label" id="ch-modestr-l" localize="output.mode"></td>
              <td class="value" id="ch-modestr" localize="none"></td>
              <td class="label" id="ch-usercount-l" localize="output.users"></td>
              <td class="value" id="ch-usercount" localize="none"></td>
            </tr>
            <tr onclick="onTopicNodesClick(event);" style="cursor:default">
              <td class="label" id="ch-topicnodes-l" localize="output.topic"></td>
              <td class="value" colspan="6">
                <span id="ch-topicnodes" localize="none"></span>
                <input hidden="true" id="ch-topicinput" style="width:90%"
                       onblur="cancelTopicEdit();"
                       onkeypress="onTopicKeypress(event);"/>
                <input type="button" hidden="true" id="ch-topiccancel"
                       onclick="setTimeout(cancelTopicEdit, 0, true);"
                       localize="output.cancel"/>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
      <div class="header" id="usr-container" hidden="true">
        <table class="h-table">
          <tbody>
            <tr>
              <td class="label" localize="output.url"></td>
              <td class="value crop-right" width="100%">
                <a id="usr-url-anchor" class="chatzilla-link"
                   href="irc://foo/bar">irc://foo/bar</a>
              </td>
              <td class="label" id="usr-serverstr-l" localize="output.via"></td>
              <td class="value" id="usr-serverstr" localize="none"></td>
            </tr>
            <tr>
              <td id="usr-title" colspan="4" localize="none"></td>
            </tr>
            <tr>
              <td id="usr-descnodes" colspan="4" localize="none"></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="header" id="dcc-chat-container" hidden="true">
        <table class="h-table">
          <tbody>
            <tr>
              <td id="dcc-chat-title" localize="none"></td>
              <td class="label" id="dcc-chat-remotestr-l" localize="output.to"></td>
              <td class="value" id="dcc-chat-remotestr" localize="none"></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="header" id="dcc-file-container" hidden="true">
        <table class="h-table">
          <tbody>
            <tr>
              <td class="label" localize="output.file"></td>
              <td class="value crop-right" id="dcc-file-file" width="100%"></td>
              <td class="label" localize="output.progress"></td>
              <td class="value" id="dcc-file-progress" localize="unknown"></td>
            </tr>
            <tr>
              <td colspan="4" class="progress-bg">
                <table id="dcc-file-progressbar" width="0%"><tbody><tr>
                  <td class="progress-fg">&nbsp;</td>
                </tr></tbody></table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div id="messages-outer" hidden="true">
      <div id="splash"></div>
      <div id="output"></div>
    </div>
  </body>
</html>
